<template>
  <el-form label-width="100px"
           :model="page.params"
           :loading="!loadingConfig.isLoading"
           v-if="loadingConfig.isLoading"
           style="margin: 0 auto"
           class="start-dialog my-search-form-box"
           :rules="rules"
           ref="ruleForm"
           v-loading.fullscreen.lock="showFile"
           element-loading-text="请耐心等候"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 筛选条件-->
    <el-row>
      <!-- 年度 -->
      <el-col :span="6">
        <el-form-item label="年度：">
          <el-select filterable
                     @change="handleSearch"
                     v-model="page.params.year"
                     placeholder="请选择">
            <el-option v-for="item in years"
                       :key="item"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 会议期号 -->
      <el-col :span="6">
        <el-form-item label="会议期号："
                      prop>
          <el-select @change="conferenceNumber"
                     filterable
                     clearable
                     v-model="page.params.hyid"
                     placeholder="请选择"
                     style="width:100%">
            <el-option v-for="item in YtQhLists"
                       :key="item.hyid"
                       :label="item.ytqh"
                       :value="item.hyid"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 议题名称 -->
      <el-col :span="24">
        <el-form-item label="议题名称："
                      porp>
          <el-input v-model="page.params.ytmc"
                    @blur="cgproject"
                    clearable
                    placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-table ref="singleTable"
              :data="tableData"
              :row-class-name="getRowClassName"
              highlight-current-row
              max-height="270"
              el-table-column
              @handleMyTabelRadioClick="handleMyTabelRadioClick"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              @current-change="handleCurrentChange"
              style="width: 100%">
      <el-table-column type='expand'>
        <template slot-scope="props">
          <el-form label-position="left"
                   inline
                   class="demo-table-expand">
            <div v-for="(data,index) in props.row.children"
                 :key="index"
                 class="children_radio">
              <el-radio v-model="tableRadio2"
                        @change='change_radio(data,index,props.row)'
                        :label="data"><i></i>
                <div style="display:flex;width:800px">
                  <div class="fenbao"
                       style="margin-left:10px;"> 分包名称：{{ data.xmmc }} </div>
                  <div class="zhaobiao">预算金额：{{ data.budgetMoney }} </div>
                  <div class="shuzi">{{ data.collectionType }} </div>
                  <div class="zhaobiao">类别：{{ data.category }} </div>
                </div>
                <!-- <el-form-item label="分包名称："
                              class="fenbao">
                  <span>{{ data.xmmc }}</span>
                </el-form-item>
                <el-form-item label="预算金额："
                              class="zhaobiao">
                  <span>{{ data.budgetMoney }}</span>
                </el-form-item>
                <el-form-item label=""
                              class="shuzi">
                  <span>{{ data.collectionType }}</span>
                </el-form-item>
                <el-form-item label="类别："
                              class="zhaobiao">
                  <span>{{ data.category }}</span>
                </el-form-item> -->
              </el-radio>
            </div>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="选择"
                       width="55">
        <template slot-scope="scope"
                  v-if="!scope.row.children">
          <el-radio v-model="tableRadio1"
                    :label="scope.row"><i></i></el-radio>
        </template>
      </el-table-column>
      <el-table-column type="index"
                       label="序号"
                       width="60">
      </el-table-column>
      <el-table-column property="year"
                       label="年度"
                       align='center'
                       width="60">
      </el-table-column>
      <el-table-column property="deptName"
                       align='center'
                       label="发起处室"
                       width="120">
      </el-table-column>
      <el-table-column property="hyqh"
                       align='center'
                       width="110"
                       label="会议期号">
      </el-table-column>
      <el-table-column property="ytmc"
                       align='left'
                       label="议题名称">
      </el-table-column>
      <el-table-column property="projectname"
                       align='left'
                       label="项目名称">
      </el-table-column>
    </el-table>

    <!-- tabel表格 -->
    <!--
    <my-table-pagination :data="tableData"
                         :page.sync="page"
                         @pageCurrentChange="apigetTableData"
                         @pageSizeChange="apigetTableData"
                         @row-click="hanleClick"
                         :tableRadio="tableRadio"
                         @handleMyTableButtonClick="handleTableButtonClick"
                         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                         @handleMyTabelRadioClick="handleMyTabelRadioClick"
                         :tableColumns="tableColumns">
      <template slot-scope="props">
        111111111111
      </template>
      <template slot-scope="{row, $index}">
        <el-radio @change="handleClickTabelRadio"
                  v-model="selftTableRadio"
                  :label="$index"></el-radio>
      </template>
    </my-table-pagination> -->
    <!-- button -->
    <el-row type="flex"
            justify="end"
            style="margin-top:20px;">
      <el-button @click="onSubmit('ruleForm')"
                 :loading="state"
                 type="success"
                 v-on:click="spot">确认</el-button>
      <el-button @click="handleClose('ruleForm')"
                 :loading="state"
                 type="warning">取消</el-button>
    </el-row>
  </el-form>
</template>

<script>
  export default {
    name: '',
    components: {},
    data () {
      return {
        showFile: false,
        loadingConfig: {
          isLoading: true
        },
        tableRadio: null,
        rules: {},
        state: false,
        tableColumns: [
          {
            label: '选择',
            radio: true,
            width: 60
          },
          {
            label: '序号',
            type: 'index',
            align: 'center',
            width: 60
          },
          {
            label: '年度',
            prop: 'year',
            align: 'center',
            width: 60
          },
          {
            label: '发起处室',
            prop: 'deptName',
            align: 'center',
            width: 110
          },
          {
            label: '会议期号',
            prop: 'hyqh',
            align: 'center',
            width: 90
          },
          {
            label: '议题名称',
            prop: 'ytmc',
            align: 'left'
          },
          {
            label: '项目名称',
            prop: 'projectname',
            align: 'left'
          }
        ],
        tableData: [],
        page: {
          params: {
            year:'',
            hyid: '',
            ytmc: ''
          }
        },
        years: [],
        YtQhLists: [],
        tableRadio1: '',
        tableRadio2: '',

        
        formData: {
          csmc: '',
          issue: '',
          issueId: '',
          profile: '',
          ytqh: '',
          projectname: '',
          isgovprocurement: '',
          budget: '',
          departmentid: '',
          category: '',
          isHistory: ''
        }
      };
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      datas: {
        type: Number,
        default: false
      }
    },
    computed: {
      computedRadio () {
        let isRadio = false;
        this.tableColumns.forEach(item => {
          if (item.radio) {
            isRadio = true;
          }
        });
        return isRadio;
      }
    },
    created () {
      console.log(this.datas);

      this.apigetTableData();
      this.apigetYearList();
      this.apigetYtQhList();
    },
    methods: {
      getRowClassName ({ row, rowIndex }) {
        console.log(row, rowIndex);
        if (!row.children) {
          return 'row-expand-cover';
        }
      },
      handleCurrentChange (e) {
        this.tableRadio1 = e
        this.formData = e
        console.log(this.tableRadio1);
      },
      spot: function () {
        
        console.log('this.formData', this.formData);
        this.$emit('spot', this.formData);
      },
      
      hanleClick (row) {
        if (this.computedRadio) {
          this.tableRadio = row.index;
          this.handleMyTabelRadioClick(row);
        }
      },
      
      handleMyTabelRadioClick (row) {
        console.log(row)
        this.formData = row
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      },
      
      apigetYearList () {
        this.$axios.get('/info/purchaseResult/getYtYearList').then(res => {
          let { data } = res.data;
          if (data) {
            this.years = data;
          }
        });
      },
      
      apigetYtQhList () {
        this.$axios
          .get('/info/purchaseResult/getYtQhList/' + this.page.params.year)
          .then(res => {
            let { data } = res.data;
            if (data) {
              this.YtQhLists = data;
            }
          });
      },
      
      apigetTableData () {
        if (this.datas == 0) {
          this.$axios
            .post('/info/contractRenewal/getSyytList', this.page.params)
            .then(res => {
              let { data } = res.data;
              if (data) {
                
                
                
                
                

                this.tableData = data;
                console.log(this.tableData);
                
                
                
                
                
                
                
                
                
                

                
                
                
                this.tableData = this.tableData.map((item, index) => ({ ...item, index }))
              }
            });
        }
        if (this.datas == 1) {
          this.$axios
            .post('/info/contractRenewal/getTbytList', this.page.params)
            .then(res => {
              let { data } = res.data;
              if (data) {
                this.tableData = data;
                this.tableData = this.tableData.map((item, index) => ({ ...item, index }))
              }
            });
        }

      },
      
      handleTableButtonClick () { },
      
      handleSearch () {
        this.apigetTableData();
        
        
        
      },
      cgproject () {
        this.apigetTableData();
      },
      conferenceNumber () {
        this.apigetTableData();
      },
      
      handleClose (formName) {
        this.$parent.$parent.start.startDialogVisible = false;
        this.$refs[formName].resetFields();
        this.$router.replace(this.$route.path);
      },
      change_radio (e, k, s) {

        console.log(e, k, s);
        s.new_children = e
        this.formData = s
      },
      
      onSubmit (formName) {
        this.state = true;
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.showFile = true;
            this.$parent.$parent.start.startDialogVisible = false;
            this.showFile = false;
          } else {
            console.log('error submit!!');
            this.state = false;
            return false;
          }
        });
      }
    }
  };
</script>
<style lang='scss' scoped>
 ::v-deep .el-radio {
    display: flex;
    padding: 10px 0;
  }
 ::v-deep .el-radio__inner {
    width: 16px;
    height: 16px;
  }
 ::v-deep.el-table {
    height: 300px;
  }
 ::v-deep.pagination-box {
    border: 1px solid red;
    display: none;
  }
  .children_radio {
    padding: 10px 10% 0 10%;
  }
  .fenbao {
    min-width: 29%;
   ::v-deep.el-form-item__label {
      color: #606266 !important;
      font-size: 14px !important;
    }
  }
  .shuzi {
    min-width: 20%;
    text-align: center;
   ::v-deep.el-form-item__label {
      color: #606266 !important;
      font-size: 14px !important;
    }
  }
  .zhaobiao {
    min-width: 15%;
    text-align: right;
   ::v-deep.el-form-item__label {
      color: #606266 !important;
      font-size: 14px !important;
    }
  }
 ::v-deep .row-expand-cover .el-table__expand-icon {
    visibility: hidden;
  }
</style>

